<style>
    .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .welcome .icon {margin-right:10px;color:#1aa094;}
    .welcome .icon-cray {color:#ffb800 !important;}
    .welcome .icon-blue {color:#1e9fff !important;}
    .welcome .icon-tip {color:#ff5722 !important;}
    .welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
    .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome .welcome-module {width:100%;height:210px;}
    .welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .welcome .panel-body {padding:10px}
    .welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
    .welcome .layui-red {color:red}
    .welcome .main_btn > p {height:40px;}
    .welcome .layui-bg-number {background-color:#F8F8F8;}
    .welcome .layuimini-notice:hover {background:#f6f6f6;}
    .welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
    .welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
    .welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10">
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <!--<span class="label pull-right layui-bg-blue">实时</span>-->
                                                        <h5>消费统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="saleData">0</h1>
                                                        <small>当前消费金额总额</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <!--<span class="label pull-right layui-bg-cyan">实时</span>-->
                                                        <h5>商品统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="commodityData">0</h1>
                                                        <small>当前最受欢迎商品</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <span class="label pull-right layui-bg-orange">实时</span>
                                                        <h5>年龄统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="ageData">0</h1>
                                                        <small>当前消费集中年龄</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs6">
                                            <div class="panel layui-bg-number">
                                                <div class="panel-body">
                                                    <div class="panel-title">
                                                        <!--<span class="label pull-right layui-bg-green">实时</span>-->
                                                        <h5">订单统计</h5>
                                                    </div>
                                                    <div class="panel-content">
                                                        <h1 class="no-margins" id="orderData">0</h1>
                                                        <small>当前消费订单数统计</small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>最新消费记录</div>
                            <div class="layui-card-body">
                                <div class="welcome-module">
                                    <div class="layui-row layui-col-space10 layuimini-qiuck">

                                        <div class="layui-card-body layui-text">
                                                <script id="news" type="text/html">
                                                    {{#  layui.each(d, function(index, item){ }}
                                                    <div class="layuimini-notice">
                                                        <div class="layuimini-notice-title" id="title">{{item.sentence}}</div>
                                                        <div class="layuimini-notice-extra">{{ item.time }}</div>
                                                    </div>
                                                    {{#  }); }}
                                                </script> 
                                                <div id="view"></div>   
                                                    <!-- <div class="layuimini-notice">
                                                        <div class="layuimini-notice-title">_xiao_</div>
                                                        <div class="layuimini-notice-extra">2019-07-11 12:57</div>
                                                    </div>
                                                    <div class="layuimini-notice">
                                                        <div class="layuimini-notice-title">_xiao_</div>
                                                        <div class="layuimini-notice-extra">2019-07-05 14:28</div>
                                                    </div>
                                                    <div class="layuimini-notice">
                                                        <div class="layuimini-notice-title">_xiao_</div>
                                                        <div class="layuimini-notice-extra">2019-07-04 11:02</div>
                                                    </div>
                                                    <div class="layuimini-notice">
                                                        <div class="layuimini-notice-title">_xiao_</div>
                                                        <div class="layuimini-notice-extra">2019-07-05 14:28</div>
                                                    </div>     -->
                                    
                                            
                                        </div>
                    
                                        
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
                            <div class="layui-card-body">
                                <div id="echarts-records" style="width: 100%;min-height:500px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- <div class="layui-col-md4">
            </div> -->
        </div>
    </div>
</div>
<script>
    layui.use(['layer','echarts','jquery','laytpl'], function () {
        var $ = layui.$,   //jQuery复制
            layer = layui.layer,
            echarts = layui.echarts,
            laytpl = layui.laytpl;


        
        /**
         * 数据统计渲染
         **/
        // $.ajax({
        //     type: "GET",
        //     url: "http://localhost:8080/product/list",
        //     data: null,
        //     dataType: "json",
        //     success: function (data) {
        //         console.log(data)
        //     }
        // });


        // //sse
        // const url = "http://localhost:8080/product/sale"

        // let datasource = new EventSource(url)

        // datasource.onmessage = function(event){
        //     let data = JSON.parse(event.data)
        //     console.log(data)
        //     updateSaleData(data[0])
        // }
        // //渲染数据
        // window.updateSaleData = function(vo){
        //     document.getElementById("saleData").innerText = vo
        // }

        // //sse
        // const url1 = "http://localhost:8080/product/commodity"

        // let datasource1 = new EventSource(url1)

        // datasource1.onmessage = function(event){
        //     console.log(event.data)
        //     updateCommodityData(event.data)
        // }
        // //渲染数据
        // window.updateSaleData = function(vo){
        //     document.getElementById("saleData").innerText = vo
        // }
        // window.updateCommodityData = function(vo){
        //     document.getElementById("commodity").innerHTML = vo
        // }
        
        
        //最近消费记录
        function getTpl(data){
            let tpl = news.innerHTML
            let view = document.getElementById("view")
            laytpl(tpl).render(data,function(html){
            view.innerHTML = html
            })
        }


        function newsData(){
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/product/newRecord",
                data: null,
                dataType: "json",
                success: function (data) {
                    //console.log(data)
                    getTpl(data)
                }
            });
        }

        
        //定义请求
        function SaleData(){
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/product/sale",
                data: null,
                dataType: "json",
                success: function (data) {
                    //console.log(data)
                    updateSaleData(data)
                }
            });
        }
        
        function updateSaleData(vo){
            document.getElementById("saleData").innerText = vo
        }

        function commodity(){
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/product/commodity",
                data: null,
                //dataType: "json",
                success: function (data) {
                    //console.log(data)
                    updateCommodityData(data)
                
                }
            });
        }

        function updateCommodityData(vo){
            document.getElementById("commodityData").innerText = vo
        }


        //年龄统计
        function ageData(){
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/product/age",
                data: null,
                //dataType: "json",
                success: function (data) {
                    //console.log(data)
                    updateAgeData(data)
                
                }
            });
        }

        function updateAgeData(vo){
            document.getElementById("ageData").innerText = vo
        }



        //订单统计
        function orderData(){
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/product/quantity",
                data: null,
                //dataType: "json",
                success: function (data) {
                    //console.log(data)
                    updateOrderData(data)
                
                }
            })
        }

        function updateOrderData(vo){
            document.getElementById("orderData").innerText = vo
        }

        $(function(){
            SaleData(),
            commodity(),
            ageData()
            orderData()
            //加载最近数据
            newsData()
        })

        
        
        





        
        


        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
         $.ajax({
                type: "GET",
                url: "http://localhost:8080/product/menuTable",
                data: null,
                //dataType: "json",
                success: function (data) {
                    //console.log(data)
                    
                    
                    var optionRecords = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: data[0].brandList
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data[0].xList
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: data[0].brandName,
                                type: 'line',
                                data: data[0].brandSale

                            },
                            {
                                name: data[1].brandName,
                                type: 'line',
                                data: data[1].brandSale
                            },
                            {
                                name: data[2].brandName,
                                type: 'line',
                                data: data[2].brandSale
                            },
                            {
                                name: data[3].brandName,
                                type: 'line',
                                data: data[3].brandSale
                            }
                        ]
                    };
                    echartsRecords.setOption(optionRecords);
                    
                }
                

            })
            
        


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
